<template>
    <div id="container"></div>
</template>

<script>
import HighCharts from 'highcharts';
export default {
    name: 'Pie',
    props: {
        grayArr: Array,
    },
    data() {
        return {
            option: {
                chart: {
                    type: 'pie',
                    margin: [0, 0, 0, 0],
                    options3d: {
                        enabled: true,
                        alpha: 60,
                        beta: 0,
                    },
                    backgroundColor: 'rgba(0,0,0,0)',
                },
                //  版权标签
                credits: {
                    enabled: false,
                },
                // 导出
                exporting: {
                    enabled: false,
                },
                title: {
                    text: '',
                    style: {
                        fontSize: 12,
                    },
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>',
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        depth: 15,
                        dataLabels: {
                            enabled: true,
                            format: '{point.name}:<b>{point.percentage:.1f}%</b>',
                        },
                    },
                },
                series: [
                    {
                        type: 'pie',
                        animation: true,
                        colors: ['#FF9933', '#FFCC00', '#99CC33', '#0099CC'],
                        data: [
                            ['灰度值高', 0],
                            ['灰度值较高', 0],
                            ['灰度值中', 0],
                            ['灰度值低', 0],
                        ],
                    },
                ],
            },
        };
    },
    mounted() {
        this.option.series[0].data.forEach((item, index) => {
            item[1] = this.grayArr[index];
        });
        HighCharts.chart('container', this.option);
    },
};
</script>

<style></style>
